<template>
  <view class="wrap">
    
    <!-- 创建班级表单 -->
    <view class="form-container">
      <view class="form-title">创建班级</view>
      
      <!-- 您的称呼 -->
      <view class="form-item">
        <view class="form-label">您的称呼</view>
        <input 
          class="form-input" 
          v-model="teacherName" 
          placeholder="如：张老师或填写真实姓名"
          placeholder-class="input-placeholder"
        />
      </view>
      
      <!-- 班级名称 -->
      <view class="form-item">
        <view class="form-label">班级名称</view>
        <input 
          class="form-input" 
          v-model="className" 
          placeholder="如：五年级(3)班"
          placeholder-class="input-placeholder"
        />
      </view>
      
      <!-- 提交按钮 -->
      <view class="submit-btn" @click="createClass">
        <text class="btn-text">提交</text>
      </view>
    </view>
  </view>
</template>

<script>
import { createBookClassManagement } from '@/api/bookSchoolAssignment'

export default {
  data() {
    return {
      statusBarHeight: 0,
      teacherName: '',
      className: ''
    }
  },
  
  onLoad() {
    // 获取状态栏高度
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight || 0;
  },
  
  methods: {
    /**
     * 返回上一页
     */
    goBack() {
      uni.navigateBack();
    },
    
    /**
     * 创建班级
     */
    async createClass() {
      if (!this.teacherName.trim()) {
        uni.showToast({
          title: '请输入您的称呼',
          icon: 'none'
        });
        return;
      }
      
      if (!this.className.trim()) {
        uni.showToast({
          title: '请输入班级名称',
          icon: 'none'
        });
        return;
      }
      
      try {
        // 显示加载提示
        uni.showLoading({
          title: '创建中...'
        });
        
        // 调用创建班级API
        const result = await createBookClassManagement({
          classManagementName: this.className.trim(),
          classManagementTeacher: this.teacherName.trim()
        });
        
        uni.hideLoading();
        
        if (result.code === 0) {
          uni.showToast({
            title: '创建班级成功',
            icon: 'success'
          });
          
          // 延迟返回上一页并刷新数据
          setTimeout(() => {
            uni.navigateBack({
              delta: 1
            });
            // 触发页面刷新事件
            uni.$emit('refreshClassList');
          }, 1500);
        } else {
          uni.showToast({
            title: result.msg || '创建班级失败',
            icon: 'none'
          });
        }
      } catch (error) {
        uni.hideLoading();
        console.error('创建班级失败:', error);
        uni.showToast({
          title: '创建班级失败，请检查网络连接',
          icon: 'none'
        });
      }
    }
  }
}
</script>

<style>
.wrap {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.status-bar {
  width: 100%;
  background-color: #fff;
}

.nav-bar {
  height: 88rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.nav-back {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  font-size: 40rpx;
  color: #333;
  font-weight: bold;
}

.nav-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
}

.nav-placeholder {
  width: 60rpx;
}

.form-container {
  background-color: #fff;
  margin: 20rpx 32rpx;
  border-radius: 16rpx;
  padding: 60rpx 40rpx;
}

.form-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 60rpx;
}

.form-item {
  margin-bottom: 60rpx;
}

.form-label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 20rpx;
  font-weight: 500;
}

.form-input {
  width: 100%;
  height: 80rpx;
  font-size: 28rpx;
  color: #333;
  border-bottom: 2rpx solid #4FC3F7;
  padding: 0 0 10rpx 0;
}

.input-placeholder {
  color: #ccc;
}

.submit-btn {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(135deg, #4FC3F7 0%, #29B6F6 100%);
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40rpx;
}

.btn-text {
  font-size: 32rpx;
  color: #fff;
  font-weight: 500;
}
</style>